<template>
	<view class="project">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="left" labelWidth="auto" :model="form" :rules="rules" ref="uForm">
			<u-form-item label="项目类型" prop="gllb" borderBottom @click="showSelect('gllb')" ref="gllb">
				<u--input v-model="form.gllbName" disabled disabledColor="#ffffff" placeholder="请选择项目类型" border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="项目编号" borderBottom>
				<u--input v-model="form.xmbh1" placeholder="自动生成不用填写" disabled border="none"></u--input>
			</u-form-item>
			<u-form-item label="项目名称" prop="xmmc1" borderBottom>
				<u--input v-model="form.xmmc1" placeholder="请输入项目名称" border="none"></u--input>
			</u-form-item>
			<u-form-item label="专业领域" prop="industry" borderBottom @click="showSelect('industry')" ref="industry">
				<u--input v-model="form.industryName" disabled disabledColor="#ffffff" placeholder="请选择专业领域" border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="实施单位" prop="bearUnit" borderBottom>
				<u--input v-model="form.bearUnit" placeholder="请输入实施单位" border="none"></u--input>
			</u-form-item>
			<u-form-item label="项目联系人" prop="contactPerson" borderBottom>
				<u--input v-model="form.contactPerson" placeholder="请输入项目联系人" border="none"></u--input>
			</u-form-item>
			<u-form-item label="联系人电话" prop="telno" borderBottom>
				<u--input v-model="form.telno" placeholder="请输入联系人电话" border="none"></u--input>
			</u-form-item>
			<u-form-item label="所属区域" prop="area" borderBottom @click="showSelect('area')" ref="area">
				<u--input v-model="form.areaName" disabled disabledColor="#ffffff" placeholder="请选择所属区域" border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="项目总投资" prop="xmztz" borderBottom>
				<u--input v-model="form.xmztz" placeholder="请输入项目总投资" border="none"></u--input>
				<text slot="right">万元</text>
			</u-form-item>
			<u-form-item label="申请资金" prop="bntz" borderBottom>
				<u--input v-model="form.bntz" placeholder="请输入申请资金" border="none"></u--input>
				<text slot="right">万元</text>
			</u-form-item>
			<u-form-item label="实施年限" prop="yearuse" borderBottom @click="showDatetime()">
				<u--input v-model="showImplementationPeriod" disabled disabledColor="#ffffff" placeholder="请选择实施年限" border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="简介" prop="jieshao" borderBottom>
				<u--textarea v-model="form.jieshao" placeholder="请输入简介" border="none" count></u--textarea>
			</u-form-item>
		</u--form>
		<u-button @click="submit" type="primary" style="margin-top: 20rpx">保存</u-button>
		<u-action-sheet :show="selectVisible" :actions="actions" :title="actionTitle" @close="selectVisible = false" @select="selectChange"></u-action-sheet>
		<u-datetime-picker
			:show="showDatetimePicker"
			:title="dateTimeTitle"
			v-model="datetimeValue"
			@cancel="closeDateTime"
			@close="closeDateTime"
			@confirm="confirmDateTime"
			closeOnClickOverlay
			mode="date"
		></u-datetime-picker>
	</view>
</template>

<script>
import { findProtype, addKJJHXM, updateKJJHXM } from '@/api/history.js';
import { getDicts, getArea } from '@/api/system/dict/data.js';
export default {
	data() {
		return {
			// select选择器隐现
			selectVisible: false,
			// form表单
			form: {
				gllb: '',
				xmmc1: '',
				industry: '',
				bearUnit: '',
				contactPerson: '',
				telno: '',
				area: '',
				xmztz: '',
				bntz: '',
				yearuse: '',
				ssDate: '',
				jieshao: ''
			},
			// select选择器数据
			actions: [
				{
					name: '男'
				},
				{
					name: '女'
				},
				{
					name: '保密'
				}
			],
			// 当前是谁的actions
			activeActionName: '',
			// 项目类型
			proTypeList: [],
			// 专业领域
			majorFieldList: [],
			// 所属区域
			areaList: [],
			// select选择器title
			actionTitle: '请选择类型',
			// form表单校验规则
			rules: {
				gllb: [{ required: true, message: '项目类别不能为空', trigger: 'blur' }],
				xmmc1: [{ required: true, message: '项目名称不能为空', trigger: 'blur' }],
				bearUnit: [{ required: true, message: '实施单位不能为空', trigger: 'blur' }],
				contactPerson: [{ required: true, message: '项目联系人不能为空', trigger: 'blur' }],
				telno: [
					{
						required: true,
						message: '联系人联系电话不能为空',
						trigger: 'blur'
					}
				],
				area: [{ required: true, message: '所属地不能为空', trigger: 'blur' }],
				industry: [{ required: true, message: '专用领域不能为空', trigger: 'blur' }],
				// jieshao: [{ required: true, message: "简介不能为空", trigger: "blur" }],
				yearuse: [{ required: true, message: '年限不能为空', trigger: 'blur' }],
				ssDate: [{ required: true, message: '年限不能为空', trigger: 'blur' }],
				xmztz: [{ required: true, message: '总投资不能为空', trigger: 'blur' }],
				bntz: [{ required: true, message: '申请资金不能为空', trigger: 'blur' }],
				recommendedDepartment: [{ required: true, message: '所属区域不能为空', trigger: 'blur' }]
			},
			// 日期选择器隐显
			showDatetimePicker: false,
			// 日期选择器title
			dateTimeTitle: '',
			// 日期选择器值
			datetimeValue: '',
			// 日期选择器开始日期的值
			startDate: '',
			// 日期选择器结束日期的值
			endDate: '',
			// 实施年限显示文字
			showImplementationPeriod: '',
			// 日期选择器弹出次数
			num: 0,
			id: ''
		};
	},
	created() {
		this.getUser();
		this.getSelectListAll();
	},
	onLoad(option) {
		this.id = option.id;
	},
	methods: {
		getUser() {
			const value = uni.getStorageSync('userInfo') || [];
			if (value.login_user == null) {
				uni.redirectTo({
					url: '/subpages/pages/register/login_province'
				});
				uni.showToast({
					icon: 'none',
					title: '请先登录！'
				});
			}
		},
		// 提交表单
		submit() {
			this.$refs.uForm
				.validate()
				.then((res) => {
					if (this.form.id != null) {
						updateKJJHXM(this.form).then((response) => {
							uni.$u.toast('操作成功');
							setTimeout(() => {
								uni.navigateBack();
							}, 500);
						});
					} else {
						this.form.projectId = this.id;
						addKJJHXM(this.form).then((response) => {
							uni.$u.toast('操作成功');
							setTimeout(() => {
								uni.navigateBack();
							}, 500);
						});
					}
				})
				.catch((errors) => {
					// uni.$u.toast('校验失败');
				});
		},
		// 获取select所有数据
		getSelectListAll() {
			findProtype().then((res) => {
				this.proTypeList = res.data;
				this.proTypeList.forEach((item, index) => {
					this.proTypeList[index].id = item.code;
				});
				console.log(res);
			});
			getDicts('project_industry').then((res) => {
				console.log(res);
				this.majorFieldList = res.data;
				this.majorFieldList.forEach((item, index) => {
					this.majorFieldList[index].name = item.dictLabel;
					this.majorFieldList[index].id = item.dictValue;
				});
			});
			getArea().then((res) => {
				console.log(res);
				this.areaList = res.data;
			});
		},
		timestampToYearMonth(timestamp) {
			const date = new Date(timestamp);
			const year = date.getFullYear();
			const month = (date.getMonth() + 1).toString().padStart(2, '0');
			return `${year}-${month}`;
		},
		selectChange(e) {
			this.form[this.activeActionName] = e.id;
			this.form[this.activeActionName + 'Name'] = e.name;
			this.$refs.uForm.validateField(this.activeActionName);
		},
		showSelect(type) {
			this.activeActionName = type;
			console.log(type);
			if (type === 'gllb') {
				this.actions = this.proTypeList;
			}
			if (type === 'industry') {
				this.actions = this.majorFieldList;
			}
			if (type === 'area') {
				this.actions = this.areaList;
			}
			this.selectVisible = true;
		},
		showDatetime() {
			this.dateTimeTitle = !this.num ? '请选择时限开始' : '请选择时限结束';
			this.showDatetimePicker = true;
		},
		confirmDateTime(a) {
			this.showDatetimePicker = false;
			setTimeout(() => {
				if (this.num) {
					this.num = 0;
					this.endDate = this.timestampToYearMonth(a.value);
					this.form.yearuse = this.startDate;
					this.showImplementationPeriod = this.startDate + '至' + this.endDate;
					this.form.ssDate = this.timestampToYearMonth(a.value);
					console.log(this.form.ssDate);
				} else {
					this.startDate = this.timestampToYearMonth(a.value);
					console.log(this.form.yearuse);
					this.num++;
					this.showDatetime();
				}
			}, 500);
			console.log(a, b, c, d);
		},
		closeDateTime() {
			this.showDatetimePicker = false;
			this.startDate = '';
			this.endDate = '';
			this.num = 0;
		}
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules);
	}
};
</script>

<style lang="scss" scoped>
.project {
	padding: 20rpx;
}
/deep/.u-action-sheet__item-wrap {
	overflow: auto;
	max-height: 50vh;
}
</style>
